<template>
  <div id="building">
    <div id="register">
    <h2 id="title">Mentor注册</h2>
    <el-form
      label-width="80px"
      :model="ruleForm"
      ref="ruleForm"
      class="login_form"
    >
      <el-form-item label="用户名" prop="name">
        <el-input v-model="ruleForm.name" @blur="losename()"> </el-input>
        <div style="color: red; font-size: 10px">{{ this.message1 }}</div>
      </el-form-item>
      <el-form-item label="密码" prop="newPwd">
        <el-input
          type="password"
          v-model="ruleForm.newPwd"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPwd">
        <el-input
          type="password"
          v-model="ruleForm.confirmPwd"
          autocomplete="off"
        ></el-input>
        <div style="color: red; font-size: 10px">{{ this.message2 }}</div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onLogin()" class="btn"
          >注册</el-button
        >
        <el-button type="primary" @click="onHello()" class="btn"
          >返回欢迎页面</el-button
        >
      </el-form-item>
    </el-form>
  </div>

  </div>
</template>
  <script>
export default {
  name: "UserRegister",
  data() {
    return {
      ruleForm: {
        name: "",
        newPwd: "",
        confirmPwd: "",
      },
      message1: "",
      message2: "",
    };
  },
  methods: {
    //注册成功。返回首页
    onLogin() {
      if (this.ruleForm.newPwd != this.ruleForm.confirmPwd) {
        this.message2 = "两次输入的密码不一致";
      } else if (
        this.ruleForm.newPwd.length < 5 &&
        this.ruleForm.confirmPwd.length < 5
      ) {
        this.message2 = "输入密码的长度小于5";
      } else {
        console.log(this.ruleForm.name)
        console.log(this.ruleForm.newPwd)
        this.$axios
          .post('/register', {
            name: this.ruleForm.name,
            password: this.ruleForm.newPwd
          })
          .then(successResponse => {
            if (successResponse.data.code === 200) {
              this.$router.push({path: '/HelloUse'})//先到欢迎页面
              console.log("成功注册")
            }
          })
          .catch(failResponse => {
            if(failResponse.data.code==400){
              this.$router.push({path:'/UserLogin'})//失败，还在登录页面
              console.log("注册失败")
            }
          })
      }
    },
    //回到欢迎页面
    onHello() {
      this.$router.push({ path: "/HelloUse" });
    },
    losename(){
      if(this.ruleForm.name==''){
        this.message1='用户名不能为空'
      }
      else{
        this.message1=''
      }
    }
  },
};
</script>
  <style scoped>
  #building {
  background: url("../assets/back.JPG");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
* {
  margin: 0;
  padding: 0;
}
#register {
  width: 450px;
  padding: 20px;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #238e68;
}
#title {
  font-size: 40px;
  color: #238e68;
  margin-left: 75px;
  margin-top: 40px;
}
.btn {
  margin-top: 20px;
  width: 110px;
  height: 50px;
  background-color: #238e68;
  border-color: #238e68;
}
</style>
